<template>
  <v-app theme="dark">
    <v-app-bar app dense  outlined  elevation="1">
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>

      </v-app-bar-title>
      <v-spacer/>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
    <v-navigation-drawer app dark v-model="drawer">
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6">
            Netcdf工具包
          </v-list-item-title>
          <v-list-item-subtitle>
            一个辅助
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>
      <v-list dense nav="true">
        <v-list-item
            v-for="item in items"
            :key="item.title"
            link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
              <v-list-item-title>
                <transition name="fade">
                   <router-link :to="item.route" class="route-link v-list-item v-list-item__title">  {{ item.title }} </router-link>
                </transition>
              </v-list-item-title>
            </v-list-item-content>

        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main app>
      <router-view/>
    </v-main>
  </v-app>
</template>
<script>
import logo from '@/assets/logo.svg'

export default {
  data() {
    return {
      items: [
        {title: '主页', icon: 'mdi-view-dashboard', route: "/"},
        {title: '地图', icon: 'mdi-image', route: "/gis"},
        {title: '关于', icon: 'mdi-help-box', route: "/about"},
      ],
      right: null,
      drawer: true,
      logo
    }
  },
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.route-link{
  text-decoration-color: aliceblue;
  text-decoration: none;
  text-align: center;
  line-height: 28px;
  outline-color: aliceblue;
  color:aliceblue;
  font-size: 20px;
  padding:8px 140px 8px 8px;
  width: 100%;
  display: flex;
}
.main{
  height:100%;
}

</style>
